<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item name="1">
      <template slot="title"> <i class="el-icon-search" />&nbsp;搜索栏 </template>
      <div class="head-container">
        <el-form :inline="true" size="mini" label-width="auto">
          <el-form-item v-for="(item, index) in searchList" :key="index" :label="item.label">
            <slot v-if="item.slot" :name="item.slot" :item="item" />
            <el-input
              v-else-if="item.searchType === 'el-input'"
              v-model="searchData[item.searchKey]"
              v-bind="getAttr(elInputAttr, item)"
              @change="$emit(`${item.searchKey}Change`, searchData[item.searchKey], item)"
              @input="$emit(`${item.searchKey}Input`, searchData[item.searchKey], item)"
              @keyup.enter.self="$emit('keyUpEnter', searchData[item.searchKey], item)"
              @mousewheel.prevent
            />

            <el-select
              v-else-if="item.searchType === 'el-select'"
              v-model="searchData[item.searchKey]"
              v-bind="getAttr(elSelectAttr, item)"
              @change="$emit(`${item.searchKey}Change`, searchData[item.searchKey], item)"
            >
              <el-option v-for="option in assertionsArray(options[item.searchKey])" :key="option.value" :label="option.label" :value="option.value" />
            </el-select>

            <el-cascader
              v-else-if="item.searchType === 'el-cascader'"
              v-model="searchData[item.searchKey]"
              v-bind="getAttr(elCascaderAttr, item)"
              :options="assertionsArray(options[item.searchKey])"
              @change="$emit(`${item.searchKey}Change`, searchData[item.searchKey], item)"
            />
            <el-date-picker
              v-else-if="item.searchType === 'el-date-picker'"
              v-model="searchData[item.searchKey]"
              v-bind="getAttr(elDatePickerAttr, item)"
              size="mini"
              @change="$emit(`${item.searchKey}Change`, searchData[item.searchKey], item)"
            />
          </el-form-item>
          <el-form-item v-if="btnList.length" class="btnList" label="">
            <span v-for="item in btnList" :key="item.label">
              <slot v-if="item.slot" name="item.slot" />
              <el-button v-else size="mini" :type="item.type" class="search-header-btn" :icon="item.icon" round @click="$emit(item.event)">
                {{ item.label }}
              </el-button>
            </span>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  props: {
    searchData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    searchList: {
      type: Array,
      default: () => {
        return []
      }
    },
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    btnList: {
      type: Array,
      default: () => {
        return [
          { label: '查询', event: 'handleSearch', type: 'primary', icon: 'el-icon-search' },
          { label: '重置', event: 'handleReset', icon: 'el-icon-refresh' },
          { label: '导出', event: 'handleExport', icon: 'el-icon-download' }
        ]
      }
    }
  },
  data() {
    return {
      activeName: '1'
    }
  },
  methods: {
    assertionsArray(val) {
      return Array.isArray(val) ? val : []
    },
    elInputAttr(item) {
      return {
        size: 'mini',
        placeholder: `请输入${item.label || ''}`,
        clearable: true,
        style: 'width: 210px'
      }
    },
    elSelectAttr() {
      return {
        size: 'mini',
        placeholder: '请选择',
        clearable: true,
        'collapse-tags': true,
        'collapse-tags-tooltip': true,
        style: 'width: 210px'
      }
    },
    elCascaderAttr() {
      return {
        size: 'mini',
        placeholder: '请选择',
        props: { children: 'children', label: 'label', expandTrigger: 'hover', value: 'value' },
        clearable: true,
        'collapse-tags': true,
        separator: '>',
        style: 'width: 210px'
      }
    },
    elDatePickerAttr() {
      return {
        size: 'mini',
        'value-format': 'YYYY-MM-DD HH:mm:ss',
        'range-separator': '-',
        'start-placeholder': '开始时间',
        'end-placeholder': '结束时间',
        style: 'width: 210px'
      }
    },
    getAttr(customFun, item) {
      return { ...customFun(item), ...(item || {}) }
    }
  }
}
</script>

<style lang="scss" scoped>
.btnList ::v-deep(.el-form-item__label-wrap) {
  margin-left: 0 !important;
}
.el-form--inline .el-form-item {
  margin-right: 16px;
}

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -o-appearance: none !important;
  -ms-appearance: none !important;
  appearance: none !important;
  margin: 0;
}
/deep/ input[type='number'] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  -o-appearance: textfield;
  -ms-appearance: textfield;
  appearance: textfield;
}
.search-header-btn{
  margin-bottom: 10px;
}
</style>
